<template>
  <div class="signContractPage">
    <el-card class="card-box" shadow="never">
      <span><span class="title">{{contractName}}</span>合同,承租方:<span class="title">{{getNewLeaseFlows}}</span>,已完成线下签约,请上传附件并确认。</span>
      <el-form class="form-box">
        <el-form-item label="签约时间">
          <el-date-picker
              v-model="params.signTime"
              type="date"
              placeholder="选择签约时间"
          />
        </el-form-item>
        <el-form-item label="合同扫描件上传">
          <el-upload
              ref="upload"
              class="upload-demo m-l10"
              :http-request="uploadFile"
          >
            <template #trigger>
              <el-button class="button_view">选择文件</el-button>
            </template>
          </el-upload>
        </el-form-item>
      </el-form>
    </el-card>
    <div class="d-flex j-center m-t20" style="width: 70%">
      <el-button class="button_cancel2" @click="cancel">取消</el-button>
      <el-button class="button_view" @click="confirmSign">确认</el-button>
    </div>
  </div>
</template>

<script setup>
import {ElCard,ElForm,ElFormItem,ElDatePicker,ElUpload,ElMessage,ElLoading} from 'element-plus';
import { useRouter } from "vue-router";
import {reactive} from 'vue';
import {fileControlApi} from "@/api/assets";
import {collaborativeApproval} from "@/api/coordination";
const router = useRouter();

// 从路由path中获取的
const contractId = router.currentRoute.value.params.contractId;
const contractName = router.currentRoute.value.params.contractName;
const getNewLeaseFlows = router.currentRoute.value.params.getNewLeaseFlows;

const params = reactive({
  contractId: contractId,
  signTime:'',
  fileUrlKey:'', // 文件地址key
  fileName:'', // 文件名称
});

// el-upload 选择文件后
const uploadFile = (file) => {
  const loading = ElLoading.service({
    lock: true,
    text: 'Loading',
    background: 'rgba(0, 0, 0, 0.7)',
  })
  let uploadFile = new FormData();
  uploadFile.append("file",file.file);
  uploadFile.append("associationId",contractId);
  uploadFile.append("businessType ",3);

  fileControlApi.uploadDocumentFile(uploadFile).then(res=>{
      if(res.code==='200'){
        loading.close();
        ElMessage.success('上传成功!');
        params.fileUrlKey = res.data.fileUrlKey;
        params.fileName = res.data.fileName;
      }
  });
}

// 确认签约
const confirmSign = () => {
  if(params.time===''){
    ElMessage.warning('签约时间不能为空!');
    return
  }
  if(params.fileUrlKey===''){
    ElMessage.warning('合同扫描件不能为空!');
    return;
  }
  collaborativeApproval.confirmSign(params).then(res=>{
    if(res.code == 200){
      router.push('/asset/collaborativeApproval');
    }
  });
}

const cancel = () => {
  router.push('/asset/collaborativeApproval');
}
</script>

<style lang="scss" scoped>
.signContractPage{
  .card-box{
    width: 70%;
    .title{
      color: red;
    }
    .form-box{
      margin-top: 10px;
    }
  }
}
</style>
